<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的v-if和v-show</title>
    <script src="js/vuejs-2.5.16.js"></script>

</head>
<body>
<div id="app">
<!--  v-if：如果值为true显示，如果值为false隐藏  v-if是通过删除标签来隐藏标签  -->
<!--  v-show:如果值为true显示，如果为false隐藏  v-show是通过设置display为none隐藏标签-->
    <p v-if="isShow">你是傻逼</p>
    <p v-show="isShow">你是傻逼</p>
    <input type="button" value="切换显示与隐藏" @click="fn1()"/>
</div>
<script type="text/javascript">
    new Vue({
        el:"#app",
        data:{
            isShow:true
        },
        methods:{
            fn1(){
                this.isShow=!this.isShow;
            }
        }
    });
</script>

</body>
</html>